<template>
  <div>
    <el-dropdown @command="selectLanguage">
      <div class="currentLang">Language:{{ $i18n.locale==='zh'?'中文':'English' }}</div>
      <el-dropdown-menu>
        <el-dropdown-item command="zh" :disabled="$i18n.locale==='zh'">中文</el-dropdown-item>
        <el-dropdown-item command="en" :disabled="$i18n.locale==='en'">English</el-dropdown-item>
      </el-dropdown-menu>

    </el-dropdown>

  </div>
</template>
<script>
export default {
  components: {},
  props: {},
  data() {
    return {

    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    selectLanguage(newLanguage) {
      console.log(newLanguage)
      localStorage.setItem('lang', newLanguage)
      // 这里是选中语言的下拉菜单的触发回调，可以得到用户点击的语言选项
      this.$i18n.locale = newLanguage
    }
  }
}
</script>

<style scoped lang="scss">
.currentLang{
    color:white
}
</style>
